<template>
  <div class="app-container">
    <div class="customContainer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select placeholder="选择门店" v-model="store_id" filterable @change="storeChange">
            <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="礼品兑换仓" v-model="formInline.house_id" filterable @change="houseChange">
            <el-option v-for="item in house_list" :key="item.house_id" :label="item.house_name" :value="item.house_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">使用区域：</span>
          <el-select v-model="formInline.area_type" style="width:120px">
            <el-option v-for="item in area_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.gift_id" placeholder="请输入礼品编号/名称" @keyup.enter.native="searchClick">
          </el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <transition name="fade" mode="out-in">
        <el-table highlight-current-row :data="list" border size="small" v-loading.body="listLoading" :key="formInline.house_id">
          <el-table-column align="center" label='序号' width="50">
            <template slot-scope="scope">
              <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="礼品图片" width="80">
            <template slot-scope="scope">
              <vue-preview class="preview" :slides="scope.row.imgList"></vue-preview>
            </template>
          </el-table-column>
          <el-table-column align="center" label="礼品名称" prop="name"></el-table-column>
          <el-table-column align="center" label="新礼品编号" prop="gift_id"></el-table-column>
          <el-table-column align="center" label="神采礼品编号" prop="no_obsolete"></el-table-column>
          <el-table-column align="center" label="箱规" prop="box_num"></el-table-column>
          <el-table-column align="center" label="类别" prop="type_name"></el-table-column>
          <el-table-column align="center" label="成本价" prop="money_cost"></el-table-column>
          <el-table-column align="center" label="库存量" prop="num"></el-table-column>
          <el-table-column align="center" label="前台销售">
            <template slot-scope="scope">
              {{scope.row.is_store_on_sale==1?'可售':'-'}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="会员兑票数" prop="ticket_value_vip"></el-table-column>
          <el-table-column align="center" label="非会员兑票数" prop="ticket_value"></el-table-column>
          <el-table-column align="center" label="兑换积分" prop="integral"></el-table-column>
          <el-table-column align="center" label="使用区域">
            <template slot-scope="scope">
              <el-button type="text" @click="showAreaDiag(scope.row)">{{scope.row.area_type|useAreaType}}</el-button>
            </template>
          </el-table-column>
          <!-- 列表的操作按钮 -->
          <el-table-column align="center" label="加入打印">
            <template slot-scope="scope">
              <el-button style="font-size:28px" v-show="scope.row.in_car==0" type="text" icon="el-icon-circle-plus" @click="addcar(scope.row,1)"></el-button>
              <el-button style="font-size:28px;margin-left:0;color:#f56c6c" v-show="scope.row.in_car==1" type="text" icon="el-icon-remove" @click="addcar(scope.row,2)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </transition>
    </div>
    <!-- 打印管理弹框 -->
    <dj-printer-new ref="printerNew" :carList="carList" :list="list"></dj-printer-new>
    <dj-printer ref="printer" :carList="carList" :list="list"></dj-printer>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
      <el-badge :value="carList.length" class="item pull-right">
        <el-button :disabled="carList.length==0" type="primary" size="small" @click="showCar(1)">打印条码</el-button>
        &nbsp;
      </el-badge>
      <el-badge :value="carList.length" class="item pull-right" style="margin-right:20px">
        <el-button :disabled="carList.length==0" type="primary" size="small" @click="showCar()">打印标签</el-button>
        &nbsp;
      </el-badge>
    </div>
    <!-- 选择区域 -->
    <region-use-dialog ref="regionUseDialog" :area_type="area_type" @change_area_type="change_area_type"></region-use-dialog>
  </div>
</template>

<script>
import regionUseDialog from '@/components/order/regionUseDialog';
import djPrinterNew from '@/components/printer/djPrinterNew';
import djPrinter from '@/components/printer/djPrinter';
import { store, house, getList, getPage, updateArea } from '@/api/storage_control/warehouse_manage';
export default {
  components: { 
    'region-use-dialog': regionUseDialog,
    'dj-printer-new': djPrinterNew,
    'dj-printer': djPrinter
  },
  data() {
    return {
      listLoading: false,
      is_printer: false,
      currentPage: 1,
      totalDataNumber: 0,
      store_id: '',
      formInline: {
        store_id: '',
        brand: '',
        house_id: '',
        area_type: '0',
        gift_id: ''
      },
      area_type: {},
      area_list: [
        { id: '0', name: '全部' },
        { id: '-1', name: '未配置' },
        { id: '-2', name: '已配置' },
        { id: '1', name: '礼品机区域' },
        { id: '2', name: '礼品柜区域' },
        { id: '3', name: '摊位机区域' },
        { id: '4', name: '企划区域' },
        { id: '5', name: '其他区域' }
      ],
      store_list: [],
      house_list: [],
      list: [],
      carList: []
    };
  },
  created() {
    this.getStore();
  },
  methods: {
    showCar(i) {
      if (i) {
        this.$refs.printerNew.showCar();
      } else {
        this.$refs.printer.showCar();
      }
    },
    addcar(row,i) {
      if(i==1){
        this.carList.push(row);
      }else{
        row.in_car=false;
        let index=this.carList.findIndex(val=>val.gift_id==row.gift_id);
        this.carList.splice(index,1);
      }
      this.$refs.printerNew.watch_in_car();
      this.$refs.printer.watch_in_car();
    },
    showAreaDiag(row) {
      this.area_type = row;
      this.$refs.regionUseDialog.show();
    },
    // 更改区域
    change_area_type(area_type, row) {
      updateArea({ gift_id: row.gift_id, area_type, store_id: this.formInline.store_id }).then(res => {
        if (res.code == 1) {
          row.area_type = area_type;
          this.$message.success(res.message);
        }
      });
    },
    getStore() {
      store({ brand: this.formInline.brand, category_id: 302 }).then(response => {
        this.store_list = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.store_id = data[0].id;
        } else {
          if (this.store_list.length > 0) {
            this.store_id = this.store_list[0].id;
          }
        }
        this.getHouse();
      });
    },
    storeChange() {
      this.list = [];
      this.getHouse();
    },
    getHouse() {
      this.formInline.house_id = '';
      house({ store_id: this.store_id, cang: 1 }).then(response => {
        this.house_list = response;
        this.formInline.house_id = response.length > 0 ? response[0].house_id : '';
      });
    },
    houseChange() {
      this.is_printer = false;
      this.carList = [];
      this.list = [];
      this.fetchData();
      this.house_list.forEach((val, i) => {
        if (val.house_id == this.formInline.house_id) {
          this.is_printer = true;
        }
      });
    },
    searchClick() {
      if (this.store_id) {
        this.fetchData();
      } else {
        this.$message({ type: 'error', message: '请选择门店' });
      }
    },
    watch_in_car() {
      this.list.forEach(function(val1, i1) {
        val1.in_car = false;
        this.carList.forEach(function(val2, i2) {
          if (val1.gift_id == val2.gift_id) {
            val1.in_car = true;
          }
        }, this);
      }, this);
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.formInline.store_id = this.store_id;
      this.currentPage = 1;
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response * 20;
          getList(this.formInline).then(response => {
            response.forEach(function(val, i) {
              val.car_gift_num = '';
              val.money_sell = val.money_sell == 0 ? '' : '¥' + val.money_sell.toFixed(2);
              val.no_obsolete = val.no_obsolete == null ? '' : val.no_obsolete;
              val.ticket_value = val.ticket_value == null ? '' : val.is_ticket_convertible == 1 ? val.ticket_value : '-';
              val.ticket_value_vip = val.ticket_value_vip == null ? '' : val.is_ticket_convertible == 1 ? val.ticket_value_vip : '-';
              val.integral = val.is_integral_convertible == 1 ? val.integral : '-';
              val.money_cost = val.money_cost ? (val.money_cost * 1).toFixed(2) : '';
              val.in_car = false;
              val.imgList = [
                {
                  src: val.img,
                  msrc: val.thumb,
                  w: 1200,
                  h: 900
                }
              ];
            });
            this.list = response;
            this.listLoading = false;
            this.watch_in_car();
          });
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then(response => {
        response.forEach(function(val, i) {
          val.car_gift_num = '';
          val.money_sell = val.money_sell == 0 ? '' : '¥' + val.money_sell.toFixed(2);
          val.no_obsolete = val.no_obsolete == null ? '' : val.no_obsolete;
          val.ticket_value = val.ticket_value == null ? '' : val.ticket_value;
          val.money_cost = val.money_cost == null ? '' : val.money_cost;
          val.in_car = false;
          val.imgList = [
            {
              src: val.img,
              msrc: val.thumb,
              w: 1200,
              h: 900
            }
          ];
        });
        this.list = response;
        this.listLoading = false;
        this.watch_in_car();
      });
    }
  }
};
</script>